<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="cssHtml.css">
</head>
<body>

	<h3>定位例子：相对定位</h3>
	<h4>设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留</h4>
	<div id="div1">
		<div id="div11" class="red"></div>
		<div id="div12" class="green"></div>
		<div id="div13" class="blue"></div>
	</div>
	
	<h3>定位例子：绝对定位</h3>
	<h4>
		a.绝对定位的元素框脱离文档流<br>
		b.绝对定位的元素之前的空间会关闭<br>
		c.绝对定位的元素的位置相对于最近的已定位祖先元素
	</h4>
	<div id="div2">
		<div id="div21" class="red"></div>
		<div id="div22" class="green"></div>
		<div id="div23" class="blue"></div>
	</div>
	
	<h3>定位例子：浮动</h3>
	<h4>
		a.浮动的框可以向左或向右移动<br>
		b.浮动框脱离文档流<br>
		c.span和label浮动后才可以调整宽度
	</h4>
	<div id="div3">
		<div id="div31" class="red">框1</div>
		<div id="div32" class="green">框2</div>
		<div id="div33" class="blue">框3</div>
	</div>
	
	
	<br><br><br><br><br>
</body>
</html>